<!DOCTYPE html>
<html style="background-color: #f2f2f2;" lang="en">
<%include("/common/header.html",{title:''}){}%>
<body>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <!--<div class="layui-col-sm6">
      <div class="layui-card">
        <div class="layui-card-header">健康指数</div>
        <div class="layui-card-body">
          <div id="main" style="height:300px"></div>
          <h4 style="text-align: center">您有5条问题需要处理<span style="color: #1E9FFF">点击处理</span></h4>
        </div>
      </div>
    </div>-->
    <div class="layui-col-sm12">
      <div class="layui-card">
        <div class="layui-tab layui-tab-card">

          <ul class="layui-tab-title">
            <% for (item in datablock) { %>
            <% if(itemLP.index==1){%>
            <li class="layui-this">${item.key}</li>
            <%}else{%>
            <li>${item.key}</li>
            <% }%>
            <% } %>
            <!--<li class="layui-this">鸡舍一号</li>
            <li>鸡舍二号</li>-->
          </ul>
          <div class="layui-tab-content" style="height: 324px">
            <% for (item in datablock) { %>
            <% if(itemLP.index==1){%>
            <div class="layui-tab-item layui-show">
              <div class="layui-row layui-col-space3">
                <div class="layui-carousel layadmin-carousel layadmin-backlog">
                  <div>
                    <ul class="layui-row layui-col-space10">
                      <% for (itemlist in item.value) { %>


                      <li class="layui-col-xs6">
                        <a class="layadmin-backlog-body"
                           style="height: 80px;${itemlist['porjectdata'].code==1?'background-color:red':''}">
                          <% if(itemlist['data'].datatype=='wd'){%>
                          <div style="width: 100%;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">
                            <h3 style="width: 49%">温度实时</h3>
                            <h3 style="width: 49%;float: right;margin-top: -25px;text-align: right"><span
                            >${itemlist['porjectdata'].lowerlimit}</span>~<span
                            >${itemlist['porjectdata'].upperlimit}</span></h3>
                          </div>

                          <%}%>
                          <% if(itemlist['data'].datatype=='sd'){%>
                          <div style="width: 100%;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">
                            <h3 style="width: 49%">湿度实时</h3>
                            <h3 style="width: 49%;float: right;margin-top: -25px;text-align: right"><span
                            >${itemlist['porjectdata'].lowerlimit}</span>~<span
                            >${itemlist['porjectdata'].upperlimit}</span></h3>
                          </div>
                          <%}%>
                          <% if(itemlist['data'].datatype=='aq'){%>
                          <div style="width: 100%;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">
                            <h3 style="width: 49%">氨气实时</h3>
                            <h3 style="width: 49%;float: right;margin-top: -25px;text-align: right"><span
                            >${itemlist['porjectdata'].lowerlimit}</span>~<span
                            >${itemlist['porjectdata'].upperlimit}</span></h3>
                          </div>
                          <%}%>
                          <% if(itemlist['data'].datatype=='gzqd'){%>
                          <div style="width: 100%;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">
                            <h3 style="width: 49%">光照强度</h3>
                            <h3 style="width: 49%;float: right;margin-top: -25px;text-align: right"><span
                            >${itemlist['porjectdata'].lowerlimit}</span>~<span
                            >${itemlist['porjectdata'].upperlimit}</span></h3>
                          </div>
                          <%}%>
                          <% if(itemlist['data'].datatype=='fs'){%>
                          <div style="width: 100%;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">
                            <h3 style="width: 49%">风速实时</h3>
                            <h3 style="width: 49%;float: right;margin-top: -25px;text-align: right"><span
                            >${itemlist['porjectdata'].lowerlimit}</span>~<span
                            >${itemlist['porjectdata'].upperlimit}</span></h3>
                          </div>
                          <%}%>
                          <% if(itemlist['data'].datatype=='co2'){%>
                          <div style="width: 100%;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">
                            <h3 style="width: 49%">二氧化碳</h3>
                            <h3 style="width: 49%;float: right;margin-top: -25px;text-align: right"><span
                            >${itemlist['porjectdata'].lowerlimit}</span>~<span
                            >${itemlist['porjectdata'].upperlimit}</span></h3>
                          </div>
                          <%}%>
                          <% if(itemlist['data'].datatype=='signal'){%>
                          <div style="width: 100%;color:#05aaaa;}">
                            <h3 style="width: 49%">4G强度</h3>
                          </div>
                          <%}%>

                          <p>
                            <%if(isNotEmpty(itemlist['porjectdata'].lowerlimit)&&isNotEmpty(itemlist['porjectdata'].upperlimit)){%>
                            <% if (parseDouble(itemlist['data'].data) <
                            parseDouble(itemlist['porjectdata'].lowerlimit)){%>
                            <cite id="lv" style="${itemlist['porjectdata'].code==1?'color:#fff':'color:#E5C33C;'}">${itemlist['data'].data}</cite>
                            <%}else
                            if(parseDouble(itemlist['data'].data)>=parseDouble(itemlist['porjectdata'].lowerlimit)&&parseDouble(itemlist['data'].data)<=parseDouble(itemlist['porjectdata'].upperlimit)){%>
                            <cite id="lv" style="${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">${itemlist['data'].data}</cite>
                            <%}else
                            if(parseDouble(itemlist['data'].data)>=parseDouble(itemlist['porjectdata'].upperlimit)){%>
                            <cite id="lv" style="${itemlist['porjectdata'].code==1?'color:#fff':'color:#E5C33C;'}">${itemlist['data'].data}</cite>
                            <%}%>
                            <%}else{%>
                            <cite id="lv">${itemlist['data'].data}</cite>
                            <%}%>

                          </p>
                          <% if(itemlist['data'].datatype=='wd'){%>
                          <span style="float:right;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">℃</span>
                          <%}%>
                          <% if(itemlist['data'].datatype=='sd'){%>
                          <span style="float:right;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">%HR</span>
                          <%}%>
                          <% if(itemlist['data'].datatype=='aq'){%>
                          <span style="float:right;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">ppm</span>
                          <%}%>
                          <% if(itemlist['data'].datatype=='gzqd'){%>
                          <span style="float:right;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">Lux</span>
                          <%}%>
                          <% if(itemlist['data'].datatype=='fs'){%>
                          <span style="float:right;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">m/s</span>
                          <%}%>
                          <% if(itemlist['data'].datatype=='co2'){%>
                          <span style="float:right;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">ppm</span>
                          <%}%>
                          <% if(itemlist['data'].datatype=='signal'){%>
                          <span style="float:right;${itemlist['porjectdata'].code==1?'color:#05aaaa':'color:#05aaaa;'}">dB</span>
                          <%}%>
                        </a>
                      </li>

                      <!--<div class="layui-col-md4">
                        <div style="height: 150px;background-color: #F2F2F2">
                          <div class="layui-card-header">
                            <% if(itemlist.datatype=='wd'){%>
                            <span style="color: #05aaaa;">温度</span>
                            <%}%>
                            <% if(itemlist.datatype=='sd'){%>
                            <span style="color: #05aaaa;">湿度</span>
                            <%}%>
                            <% if(itemlist.datatype=='aq'){%>
                            <span style="color: #05aaaa;">氨气</span>
                            <%}%>
                            <% if(itemlist.datatype=='gzqd'){%>
                            <span style="color: #05aaaa;">光照</span>
                            <%}%>
                            <% if(itemlist.datatype=='fs'){%>
                            <span style="color: #05aaaa;">风速</span>
                            <%}%>
                            <% if(itemlist.datatype=='co2'){%>
                            <span style="color: #05aaaa;">CO2</span>
                            <%}%>
                            <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
                          </div>
                          <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                            <p class="layuiadmin-big-font" style="padding-bottom: 0px;">
                              <span style="margin-left: 70px;color: #05aaaa;">${itemlist.data}</span>
                            </p>
                            <p>
                              <% if(itemlist.datatype=='wd'){%>
                              <span style="float:right;color: #05aaaa;">℃</span>
                              <%}%>
                              <% if(itemlist.datatype=='sd'){%>
                              <span style="float:right;color: #05aaaa;">%HR</span>
                              <%}%>
                              <% if(itemlist.datatype=='aq'){%>
                              <span style="float:right;color: #05aaaa;">PPM</span>
                              <%}%>
                              <% if(itemlist.datatype=='gzqd'){%>
                              <span style="float:right;color: #05aaaa;">LUX</span>
                              <%}%>
                              <% if(itemlist.datatype=='fs'){%>
                              <span style="float:right;color: #05aaaa;">m/s</span>
                              <%}%>
                              <% if(itemlist.datatype=='co2'){%>
                              <span style="float:right;color: #05aaaa;">m/s</span>
                              <%}%>

                            </p>
                          </div>

                        </div>
                      </div>-->


                      <% }elsefor{%>
                      <h3 style="text-align: center;line-height: 200px">无数据</h3>
                      <% }%>
                    </ul>
                  </div>
                </div>
                <!--   <% for (itemlist in item.value) { %>

                   <div class="layui-col-md4">
                     <div style="height: 150px;background-color: #F2F2F2">
                       <div class="layui-card-header">
                         <% if(itemlist.datatype=='wd'){%>
                         <span style="color: #05aaaa;">温度</span>
                         <%}%>
                         <% if(itemlist.datatype=='sd'){%>
                         <span style="color: #05aaaa;">湿度</span>
                         <%}%>
                         <% if(itemlist.datatype=='aq'){%>
                         <span style="color: #05aaaa;">氨气</span>
                         <%}%>
                         <% if(itemlist.datatype=='gzqd'){%>
                         <span style="color: #05aaaa;">光照</span>
                         <%}%>
                         <% if(itemlist.datatype=='fs'){%>
                         <span style="color: #05aaaa;">风速</span>
                         <%}%>
                         <% if(itemlist.datatype=='co2'){%>
                         <span style="color: #05aaaa;">CO2</span>
                         <%}%>
                         <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
                       </div>
                       <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                         <p class="layuiadmin-big-font" style="padding-bottom: 0px;">
                           <span style="margin-left: 70px;color: #05aaaa;">${itemlist.data}</span>
                         </p>
                         <p>
                           <% if(itemlist.datatype=='wd'){%>
                           <span style="float:right;color: #05aaaa;">℃</span>
                           <%}%>
                           <% if(itemlist.datatype=='sd'){%>
                           <span style="float:right;color: #05aaaa;">%HR</span>
                           <%}%>
                           <% if(itemlist.datatype=='aq'){%>
                           <span style="float:right;color: #05aaaa;">PPM</span>
                           <%}%>
                           <% if(itemlist.datatype=='gzqd'){%>
                           <span style="float:right;color: #05aaaa;">LUX</span>
                           <%}%>
                           <% if(itemlist.datatype=='fs'){%>
                           <span style="float:right;color: #05aaaa;">m/s</span>
                           <%}%>
                           <% if(itemlist.datatype=='co2'){%>
                           <span style="float:right;color: #05aaaa;">m/s</span>
                           <%}%>

                         </p>
                       </div>

                     </div>
                   </div>


                   <% }elsefor{%>
                   <h3 style="text-align: center;line-height: 200px">无数据</h3>
                   <% }%>-->
              </div>
            </div>
            <% }else{%>
            <div class="layui-tab-item">
              <div class="layui-row layui-col-space3">
                <div class="layui-carousel layadmin-carousel layadmin-backlog">
                  <div>
                    <ul class="layui-row layui-col-space10">
                      <% for (itemlist in item.value) { %>
                      <li class="layui-col-xs6">
                        <a class="layadmin-backlog-body"
                           style="height: 80px;${itemlist['porjectdata'].code==1?'background-color:red':''}">
                          <% if(itemlist['data'].datatype=='wd'){%>
                          <div style="width: 100%;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">
                            <h3 style="width: 49%">温度实时</h3>
                            <h3 style="width: 49%;float: right;margin-top: -25px;text-align: right"><span
                            >${itemlist['porjectdata'].lowerlimit}</span>~<span
                            >${itemlist['porjectdata'].upperlimit}</span></h3>
                          </div>

                          <%}%>
                          <% if(itemlist['data'].datatype=='sd'){%>
                          <div style="width: 100%;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">
                            <h3 style="width: 49%">湿度实时</h3>
                            <h3 style="width: 49%;float: right;margin-top: -25px;text-align: right"><span
                            >${itemlist['porjectdata'].lowerlimit}</span>~<span
                            >${itemlist['porjectdata'].upperlimit}</span></h3>
                          </div>
                          <%}%>
                          <% if(itemlist['data'].datatype=='aq'){%>
                          <div style="width: 100%;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">
                            <h3 style="width: 49%">氨气实时</h3>
                            <h3 style="width: 49%;float: right;margin-top: -25px;text-align: right"><span
                            >${itemlist['porjectdata'].lowerlimit}</span>~<span
                            >${itemlist['porjectdata'].upperlimit}</span></h3>
                          </div>
                          <%}%>
                          <% if(itemlist['data'].datatype=='gzqd'){%>
                          <div style="width: 100%;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">
                            <h3 style="width: 49%">光照强度</h3>
                            <h3 style="width: 49%;float: right;margin-top: -25px;text-align: right"><span
                            >${itemlist['porjectdata'].lowerlimit}</span>~<span
                            >${itemlist['porjectdata'].upperlimit}</span></h3>
                          </div>
                          <%}%>
                          <% if(itemlist['data'].datatype=='fs'){%>
                          <div style="width: 100%;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">
                            <h3 style="width: 49%">风速实时</h3>
                            <h3 style="width: 49%;float: right;margin-top: -25px;text-align: right"><span
                            >${itemlist['porjectdata'].lowerlimit}</span>~<span
                            >${itemlist['porjectdata'].upperlimit}</span></h3>
                          </div>
                          <%}%>
                          <% if(itemlist['data'].datatype=='co2'){%>
                          <div style="width: 100%;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">
                            <h3 style="width: 49%">二氧化碳</h3>
                            <h3 style="width: 49%;float: right;margin-top: -25px;text-align: right"><span
                            >${itemlist['porjectdata'].lowerlimit}</span>~<span
                            >${itemlist['porjectdata'].upperlimit}</span></h3>
                          </div>
                          <%}%>
                          <% if(itemlist['data'].datatype=='signal'){%>
                          <div style="width: 100%;color:#05aaaa;}">
                            <h3 style="width: 49%">4G强度</h3>
                          </div>
                          <%}%>

                          <p>
                            <%if(isNotEmpty(itemlist['porjectdata'].lowerlimit)&&isNotEmpty(itemlist['porjectdata'].upperlimit)){%>
                            <% if (parseDouble(itemlist['data'].data) <
                            parseDouble(itemlist['porjectdata'].lowerlimit)){%>
                            <cite id="lv" style="${itemlist['porjectdata'].code==1?'color:#fff':'color:#E5C33C;'}">${itemlist['data'].data}</cite>
                            <%}else
                            if(parseDouble(itemlist['data'].data)>=parseDouble(itemlist['porjectdata'].lowerlimit)&&parseDouble(itemlist['data'].data)<=parseDouble(itemlist['porjectdata'].upperlimit)){%>
                            <cite id="lv" style="${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">${itemlist['data'].data}</cite>
                            <%}else
                            if(parseDouble(itemlist['data'].data)>=parseDouble(itemlist['porjectdata'].upperlimit)){%>
                            <cite id="lv" style="${itemlist['porjectdata'].code==1?'color:#fff':'color:#E5C33C;'}">${itemlist['data'].data}</cite>
                            <%}%>
                            <%}else{%>
                            <cite id="lv">${itemlist['data'].data}</cite>
                            <%}%>

                          </p>
                          <% if(itemlist['data'].datatype=='wd'){%>
                          <span style="float:right;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">℃</span>
                          <%}%>
                          <% if(itemlist['data'].datatype=='sd'){%>
                          <span style="float:right;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">%HR</span>
                          <%}%>
                          <% if(itemlist['data'].datatype=='aq'){%>
                          <span style="float:right;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">ppm</span>
                          <%}%>
                          <% if(itemlist['data'].datatype=='gzqd'){%>
                          <span style="float:right;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">Lux</span>
                          <%}%>
                          <% if(itemlist['data'].datatype=='fs'){%>
                          <span style="float:right;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">m/s</span>
                          <%}%>
                          <% if(itemlist['data'].datatype=='co2'){%>
                          <span style="float:right;${itemlist['porjectdata'].code==1?'color:#fff':'color:#05aaaa;'}">ppm</span>
                          <%}%>
                          <% if(itemlist['data'].datatype=='signal'){%>
                          <span style="float:right;${itemlist['porjectdata'].code==1?'color:#05aaaa':'color:#05aaaa;'}">dB</span>
                          <%}%>
                        </a>
                      </li>

                      <!--<div class="layui-col-md4">
                        <div style="height: 150px;background-color: #F2F2F2">
                          <div class="layui-card-header">
                            <% if(itemlist.datatype=='wd'){%>
                            <span style="color: #05aaaa;">温度</span>
                            <%}%>
                            <% if(itemlist.datatype=='sd'){%>
                            <span style="color: #05aaaa;">湿度</span>
                            <%}%>
                            <% if(itemlist.datatype=='aq'){%>
                            <span style="color: #05aaaa;">氨气</span>
                            <%}%>
                            <% if(itemlist.datatype=='gzqd'){%>
                            <span style="color: #05aaaa;">光照</span>
                            <%}%>
                            <% if(itemlist.datatype=='fs'){%>
                            <span style="color: #05aaaa;">风速</span>
                            <%}%>
                            <% if(itemlist.datatype=='co2'){%>
                            <span style="color: #05aaaa;">CO2</span>
                            <%}%>
                            <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
                          </div>
                          <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                            <p class="layuiadmin-big-font" style="padding-bottom: 0px;">
                              <span style="margin-left: 70px;color: #05aaaa;">${itemlist.data}</span>
                            </p>
                            <p>
                              <% if(itemlist.datatype=='wd'){%>
                              <span style="float:right;color: #05aaaa;">℃</span>
                              <%}%>
                              <% if(itemlist.datatype=='sd'){%>
                              <span style="float:right;color: #05aaaa;">%HR</span>
                              <%}%>
                              <% if(itemlist.datatype=='aq'){%>
                              <span style="float:right;color: #05aaaa;">PPM</span>
                              <%}%>
                              <% if(itemlist.datatype=='gzqd'){%>
                              <span style="float:right;color: #05aaaa;">LUX</span>
                              <%}%>
                              <% if(itemlist.datatype=='fs'){%>
                              <span style="float:right;color: #05aaaa;">m/s</span>
                              <%}%>
                              <% if(itemlist.datatype=='co2'){%>
                              <span style="float:right;color: #05aaaa;">m/s</span>
                              <%}%>

                            </p>
                          </div>

                        </div>
                      </div>-->


                      <% }elsefor{%>
                      <h3 style="text-align: center;line-height: 200px">无数据</h3>
                      <% }%>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <% }%>
            <% } %>


            <!--   <div class="layui-tab-item">
                 <div class="layui-col-sm6 layui-col-md4">
                   <div class="layui-card">
                     <div class="layui-card-header">
                       <span style="color: #05aaaa;">温度</span>
                       <span class="layui-badge layui-bg-red layuiadmin-badge">异常</span>
                     </div>
                     <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                       <p class="layuiadmin-big-font" style="padding-bottom: 0px;">
                         <i
                                 style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                         >
                           <image src="img/temp.png"></image>
                         </i><span style="margin-left: 70px;color: #05aaaa;">23</span>
                       </p>
                       <p>
                         <span style="float:right;color: #05aaaa;">℃</span>
                       </p>
                     </div>
                   </div>
                 </div>
                 <div class="layui-col-sm6 layui-col-md4">
                   <div class="layui-card">
                     <div class="layui-card-header">
                       <span style="color: #05aaaa;">湿度</span>
                       <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
                     </div>
                     <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                       <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                               style="font-size: 25px;position: absolute;top: 7px;left: 20px;">
                         <image src="img/wid.png"></image>
                       </i><span style="margin-left: 70px;color: #05aaaa;">50</span>
                       </p>
                       <p>
                         <span style="float:right;color: #05aaaa;">%RH</span>
                       </p>
                     </div>
                   </div>
                 </div>
                 <div class="layui-col-sm6 layui-col-md4">
                   <div class="layui-card">
                     <div class="layui-card-header">
                       <span style="color: #05aaaa;">二氧化碳</span>
                       <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
                     </div>
                     <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                       <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                               style="font-size: 25px;position: absolute;top: 7px;left: 20px;">
                         <image src="img/coo.png" alt="" style="width: 32px;height: 32px"></image>
                       </i><span style="margin-left: 70px;color: #05aaaa;">147</span>
                       </p>
                       <p>
                         <span style="float:right;color: #05aaaa;">PPM</span>
                       </p>
                     </div>
                   </div>
                 </div>
                 <div class="layui-col-sm6 layui-col-md4">
                   <div class="layui-card">
                     <div class="layui-card-header">
                       <span style="color: #05aaaa;">氨气</span>
                       <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
                     </div>
                     <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                       <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                               style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                       >
                         <image src="img/nh3.png"></image>
                       </i><span
                               style="margin-left: 70px;color: #05aaaa;">16</span></p>
                       <p>
                         <span style="float:right;color: #05aaaa;">PPM</span>
                       </p>
                     </div>
                   </div>
                 </div>
                 <div class="layui-col-sm6 layui-col-md4">
                   <div class="layui-card">
                     <div class="layui-card-header">
                       <span style="color: #05aaaa;">光照强度</span>
                       <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
                     </div>
                     <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                       <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                               style="font-size: 25px;position: absolute;top: 7px;left: 20px;">
                         <image src="img/sun.png"></image>
                       </i><span
                               style="margin-left: 70px;color: #05aaaa;">5</span></p>
                       <p>
                         <span style="float:right;color: #05aaaa;">LX</span>
                       </p>
                     </div>
                   </div>
                 </div>
                 <div class="layui-col-sm6 layui-col-md4">
                   <div class="layui-card">
                     <div class="layui-card-header">
                       <span style="color: #05aaaa;">风速</span>
                       <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
                     </div>
                     <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                       <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                               style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                       >
                         <image src="img/speed.png"></image>
                       </i><span
                               style="margin-left: 70px;color: #05aaaa;">2.5</span></p>
                       <p>
                         <span style="float:right;color: #05aaaa;">m/s</span>
                       </p>
                     </div>
                   </div>
                 </div>
               </div>
               <div class="layui-tab-item">3</div>
               <div class="layui-tab-item">4</div>
               <div class="layui-tab-item">5</div>
               <div class="layui-tab-item">6</div>-->
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="layui-col-sm6 layui-col-md2">
       <div class="layui-card" style="height: 123px;">
         <div class="layui-card-header">
           <span style="color: #05aaaa;">湿度</span>
           <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
         </div>
         <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
           <p class="layuiadmin-big-font" style="padding-bottom: 0px;text-align: center;"><i
                   style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                   class="layui-inline layui-icon iconfont layui-extend-shidu"></i><span
                   style="margin:0px auto;color: #05aaaa;" id="lharea">45</span></p>
           <p>
             <span style="float:right;color: #05aaaa;">%RH</span>
           </p>
         </div>
       </div>
     </div>
     <div class="layui-col-sm6 layui-col-md2">
       <div class="layui-card" style="height: 123px;">
         <div class="layui-card-header">
           <span style="color: #05aaaa;">氨气</span>
           <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
         </div>
         <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
           <p class="layuiadmin-big-font" style="padding-bottom: 0px;text-align: center;"><i
                   style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                   class="layui-inline layui-icon iconfont layui-extend-anqi"></i><span
                   style="margin:0px auto;color: #05aaaa;" id="tjarea">0</span></p>
           <p>
             <span style="float:right;color: #05aaaa;">PPM</span>
           </p>
         </div>
       </div>
     </div>
     <div class="layui-col-sm6 layui-col-md2">
       <div class="layui-card" style="height: 123px;background-color: red">
         <div class="layui-card-header" style="border-bottom: 1px solid red;">
           <span style="color: #FFF;">二氧化碳</span>
           <span class="layui-badge layui-bg-red layuiadmin-badge" style="color: #FFF">超标</span>
         </div>
         <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
           <p class="layuiadmin-big-font" style="padding-bottom: 0px;text-align: center;"><i
                   style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                   class="layui-inline  iconfont layui-extend-eryanghuatan"></i><span
                   style="margin:0px auto;color: #FFF;">1500</span></p>
           <p>
             <span style="float:right;color: #FFF;">CO2</span>
           </p>
         </div>
       </div>
     </div>
     <div class="layui-col-sm6 layui-col-md2">
       <div class="layui-card" style="height: 123px;">
         <div class="layui-card-header">
           <span style="color: #05aaaa;">风速</span>
           <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
         </div>
         <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
           <p class="layuiadmin-big-font" style="padding-bottom: 0px;text-align: center;"><i
                   style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                   class="layui-inline layui-icon iconfont layui-extend-fengsu"></i><span
                   style="margin:0px auto;color: #05aaaa;">7</span></p>
           <p>
             <span style="float:right;color: #05aaaa;">M/S</span>
           </p>
         </div>
       </div>
     </div>
     <div class="layui-col-sm6 layui-col-md2">
       <div class="layui-card" style="height: 123px;">
         <div class="layui-card-header">
           <span style="color: #05aaaa;">光照强度</span>
           <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
         </div>
         <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
           <p class="layuiadmin-big-font" style="padding-bottom: 0px;text-align: center;"><i
                   style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                   class="layui-inline layui-icon iconfont layui-extend-guangzhaoqiangdutubiao-"></i><span
                   style="margin:0px auto;color: #05aaaa;">100</span></p>
           <p>
             <span style="float:right;color: #05aaaa;">LX</span>
           </p>
         </div>
       </div>
     </div>-->
    <div class="layui-col-sm12">
      <div class="layui-row layui-col-space15" id="findHomecontainer">
        <!--图-->
      </div>
    </div>

  </div>
</div>

<script id="demo" type="text/html">
  {{# layui.each(d.list, function(index, item){ }}
  <div class="layui-col-sm6 layui-col-md2">
    <div class="layui-card" style="height: 123px;">
      <div class="layui-card-header">
        {{# if(item.datatype=='wd'){ }}
        <span style="color: #05aaaa;">温度</span>
        {{# } }}
        {{# if(item.datatype=='sd'){ }}
        <span style="color: #05aaaa;">湿度</span>
        {{# } }}
        {{# if(item.datatype=='co2'){ }}
        <span style="color: #05aaaa;">二氧化碳</span>
        {{# } }}
        {{# if(item.datatype=='aq'){ }}
        <span style="color: #05aaaa;">氨气</span>
        {{# } }}
        {{# if(item.datatype=='fs'){ }}
        <span style="color: #05aaaa;">风速</span>
        {{# } }}
        {{# if(item.datatype=='gzqd'){ }}
        <span style="color: #05aaaa;">光照强度</span>
        {{# } }}
        <!--        <span style="color: #05aaaa;">{{ item.datatype }}</span>-->
        <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
      </div>
      <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
        <p class="layuiadmin-big-font" style="padding-bottom: 0px;text-align: center;">
          {{# if(item.datatype=='wd'){ }}
          <i style="font-size: 25px;position: absolute;top: 13px;left: 20px;"
             class="layui-inline layui-icon iconfont layui-extend-wendu"></i>
          {{# } }}
          {{# if(item.datatype=='sd'){ }}
          <i style="font-size: 25px;position: absolute;top: 13px;left: 20px;"
             class="layui-inline layui-icon iconfont layui-extend-shidu"></i>
          {{# } }}
          {{# if(item.datatype=='co2'){ }}
          <i style="font-size: 25px;position: absolute;top: 13px;left: 20px;"
             class="layui-inline layui-icon iconfont layui-extend-eryanghuatan"></i>
          {{# } }}
          {{# if(item.datatype=='aq'){ }}
          <i style="font-size: 25px;position: absolute;top: 13px;left: 20px;"
             class="layui-inline layui-icon iconfont layui-extend-anqi"></i>
          {{# } }}
          {{# if(item.datatype=='fs'){ }}
          <i style="font-size: 25px;position: absolute;top: 13px;left: 20px;"
             class="layui-inline layui-icon iconfont layui-extend-fengsu"></i>
          {{# } }}
          {{# if(item.datatype=='gzqd'){ }}
          <i style="font-size: 25px;position: absolute;top: 13px;left: 20px;"
             class="layui-inline layui-icon iconfont layui-extend-guangzhaoqiangdutubiao-"></i>
          {{# } }}
          <span style="margin:0px auto;color: #05aaaa;font-size: 25px" id="area">{{ item.data }}</span></p>
        <p>
          {{# if(item.datatype=='wd'){ }}
          <span style="float:right;color: #05aaaa;">℃</span>
          {{# } }}
          {{# if(item.datatype=='sd'){ }}
          <span style="float:right;color: #05aaaa;">%RH</span>
          {{# } }}
          {{# if(item.datatype=='co2'){ }}
          <span style="float:right;color: #05aaaa;">CO2</span>
          {{# } }}
          {{# if(item.datatype=='aq'){ }}
          <span style="float:right;color: #05aaaa;">PPM</span>
          {{# } }}
          {{# if(item.datatype=='fs'){ }}
          <span style="float:right;color: #05aaaa;">M/S</span>
          {{# } }}
          {{# if(item.datatype=='gzqd'){ }}
          <span style="float:right;color: #05aaaa;">LX</span>
          {{# } }}

        </p>
      </div>
    </div>
  </div>
  {{#  }); }}
  {{# if(d.list.length === 0){ }}
  无数据
  {{# } }}
</script>


<%include("/common/foot.html"){}%>
<script type="text/javascript" src="js/homeecharts.js"></script>
<script>
  // 基于准备好的dom，初始化echarts图表
  // var myChart = echarts.init(document.getElementById('main'));
  /* var optionse = {
     tooltip: {
       trigger: 'item',
       formatter: "{a} <br/>{b}: {c} ({d}%)"
     },
     legend: {
       orient: 'vertical',
       left: 10,
       data: ['正常', '风险']
     },
     color: ['#f10c06', '#2F9688'],
     series: [
       {
         name: '健康分值',
         type: 'pie',
         center: ['50%', '50%'], // 饼图的圆心坐标
         radius: ['55%', '80%'],
         avoidLabelOverlap: false,
         hoverAnimation: false,
         label: { //  饼图图形上的文本标签

           normal: { // normal 是图形在默认状态下的样式
             show: true,
             position: 'center',
             color: 'red',
             fontSize: 30,
             fontWeight: 'bold',
             formatter: '{d}%' // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
           }
         },

         labelLine: {
           normal: {
             show: false
           }
         },
         data: [{
           value: 60,
           name: '正常',
           label: {
             normal: {
               show: false
             }
           }
         }, {
           value: 40,
           name: "风险",
           label: {
             normal: {
               show: true,
               color: "#2F9688"
             }
           }
         }

         ]
       }
     ]
   };
   var options = {
     tooltip: {
       trigger: 'item',
       formatter: '{a} <br/>{b}: {c} ({d}%)'
     },
     legend: {
       orient: 'vertical',
       left: 10,
       data: ['直接访问', '搜索引擎']
     },
     color: ['#91C7AE', '#C23531'],
     series: [
       {
         name: '访问来源',
         type: 'pie',
         radius: ['50%', '70%'],
         avoidLabelOverlap: false,
         label: {
           show: false,
           position: 'center'
         },
         emphasis: {
           label: {
             show: true,
             fontSize: '30',
             fontWeight: 'bold'
           }
         },
         labelLine: {
           show: false
         },
         data: [
           {value: 335, name: '直接访问'},

           {value: 1548, name: '搜索引擎'}
         ]
       }
     ]
   };

   // 为echarts对象加载数据
   myChart.setOption(optionse);

   setInterval(function () {
     optionse.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
     myChart.setOption(optionse, true);
   }, 6000);*/
  layui.use(['index', 'table', 'form', 'laytpl'], function () {
    var $ = layui.jquery;
    var laytpl = layui.laytpl;

    /*-----------------查询豆腐块Start------------------*/
    /*  let promise = new Promise(function (resolve, reject) {
        $.ajax({
          url: "home/findHomeblock.json",
          type: "POST",
          data: {},
          dataType: "json",
          success: function (ret) {
            console.log(ret)
            if (ret) {
              resolve(ret);
            } else {
              alert("网络异常，请稍后再试吧" + JSON.stringify(err))
            }
          },
          error: function (jqXHR, textStatus, errorThrown) {
          }
        });
      });
      promise.then(data => {
        var rets = { //数据
          "list": data
        };
        laytpl($("#demo").html()).render(rets, function (html) {
          $("#block").html(html);
        });
      });*/
    /*-----------------查询豆腐块End------------------*/

    /*-----------------图表查询Start------------------*/
    let qytop = new Promise(function (resolve, reject) {
      $.ajax({
        url: "home/findHomecontainer.json",
        type: "POST",
        data: {},
        dataType: "json",
        success: function (ret) {

          if (ret) {
            resolve(ret);
          } else {
            alert("网络异常，请稍后再试吧" + JSON.stringify(err))
          }
        },
        error: function (jqXHR, textStatus, errorThrown) {
        }
      });
    });
    qytop.then(obj => {
      console.log(obj)
      for (const dataKey in obj) {
        if (dataKey == 'co2') {
          var htm = '<div class="layui-col-sm6">\n' +
            '<div class="layui-card">\n' +
            '  <div class="layui-card-header">实时二氧化碳展示</div>\n' +
            '  <div class="layui-card-body">\n' +
            '    <table class="layui-table" lay-skin="line">\n' +
            '      <tbody>\n' +
            '      <tr>\n' +
            '        <td>\n' +
            '          <div id="container' + dataKey + '" style="width:100%; height:300px"></div>\n' +
            '        </td>\n' +
            '      </tr>\n' +
            '      </tbody>\n' +
            '    </table>\n' +
            '  </div>\n' +
            '</div>\n' +
            ' </div>';
          $("#findHomecontainer").append(htm)
          var dom = document.getElementById("container" + dataKey);
          var myChart = echarts.init(dom);
          var option = {
            title: {
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              formatter: '{b} <br/>{c} ppm',
            },

            legend: {
              // orient: 'vertical',
              data: [],
              // left: 'right'
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                data: []
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [],
          };

          for (const data in obj[dataKey]) {
            var datas = [];
            var date = [];
            for (let i = 0; i < obj[dataKey][data].datas.length; i++) {
              date.push(obj[dataKey][data].datas[i].Acquisitiontime);
              datas.push(obj[dataKey][data].datas[i].data)
              //date.push(obj[dataKey][data][i].Acquisitiontime);
            }
            var markLine = {};
            if (obj[dataKey][data].pro.lowerlimit && obj[dataKey][data].pro.upperlimit) {
              markLine = {
                silent: true,
                data: [{
                  yAxis: obj[dataKey][data].pro.lowerlimit,
                  lineStyle: {
                    color: obj[dataKey][data].pro.lowerlimitcolor
                  }
                }, {
                  yAxis: obj[dataKey][data].pro.upperlimit,
                  lineStyle: {
                    color: obj[dataKey][data].pro.upperlimitcolor
                  }
                }]
              }
            }
            option.xAxis[0].data = date;
            option.legend.data.push(data);
            option.series.push({
              name: data,
              type: 'line',
              color: '#E5C33C',
              data: datas,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: markLine,
            },)
            // console.log("类型是:" + dataKey + "----场地是" + data)
            // console.log(obj[dataKey][data])
          }
          myChart.setOption(option);
        } else if (dataKey == 'wd') {
          var htm = '<div class="layui-col-sm6">\n' +
            '<div class="layui-card">\n' +
            '  <div class="layui-card-header">实时温度数据展示</div>\n' +
            '  <div class="layui-card-body">\n' +
            '    <table class="layui-table" lay-skin="line">\n' +
            '      <tbody>\n' +
            '      <tr>\n' +
            '        <td>\n' +
            '          <div id="container' + dataKey + '" style="width:100%; height:300px"></div>\n' +
            '        </td>\n' +
            '      </tr>\n' +
            '      </tbody>\n' +
            '    </table>\n' +
            '  </div>\n' +
            '</div>\n' +
            ' </div>';
          $("#findHomecontainer").append(htm)
          var dom = document.getElementById("container" + dataKey);
          var myChart = echarts.init(dom);
          var option = {
            title: {
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              formatter: '{b} <br/>{c} ℃',
            },

            legend: {
              // orient: 'vertical',
              data: [],
              // left: 'right'
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                data: []
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: []
          };

          for (const data in obj[dataKey]) {
            var datas = [];
            var date = [];
            //console.log(obj[dataKey][data].datas)
            for (let i = 0; i < obj[dataKey][data].datas.length; i++) {
              date.push(obj[dataKey][data].datas[i].Acquisitiontime);
              datas.push(obj[dataKey][data].datas[i].data)
              //date.push(obj[dataKey][data][i].Acquisitiontime);
            }
            var markLine = {};
            if (obj[dataKey][data].pro.lowerlimit && obj[dataKey][data].pro.upperlimit) {
              markLine = {
                silent: true,
                data: [{
                  yAxis: obj[dataKey][data].pro.lowerlimit,
                  lineStyle: {
                    color: obj[dataKey][data].pro.lowerlimitcolor
                  }
                }, {
                  yAxis: obj[dataKey][data].pro.upperlimit,
                  lineStyle: {
                    color: obj[dataKey][data].pro.upperlimitcolor
                  }
                }]
              }
            }
            option.xAxis[0].data = date;
            option.legend.data.push(data);
            option.series.push({
              name: data, type: 'line',
              color: "#5bc49f",
              data: datas,
              markLine: markLine,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              }
            })
            // console.log("类型是:" + dataKey + "----场地是" + data)
            // console.log(obj[dataKey][data])
          }
          myChart.setOption(option);
        } else if (dataKey == 'sd') {
          var htm = '<div class="layui-col-sm6">\n' +
            '<div class="layui-card">\n' +
            '  <div class="layui-card-header">实时湿度数据展示</div>\n' +
            '  <div class="layui-card-body">\n' +
            '    <table class="layui-table" lay-skin="line">\n' +
            '      <tbody>\n' +
            '      <tr>\n' +
            '        <td>\n' +
            '          <div id="container' + dataKey + '" style="width:100%; height:300px"></div>\n' +
            '        </td>\n' +
            '      </tr>\n' +
            '      </tbody>\n' +
            '    </table>\n' +
            '  </div>\n' +
            '</div>\n' +
            ' </div>';
          $("#findHomecontainer").append(htm)
          var dom = document.getElementById("container" + dataKey);
          var myChart = echarts.init(dom);
          var option = {
            title: {
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              formatter: '{b} <br/>{c} %HR',
            },

            legend: {
              // orient: 'vertical',
              data: [],
              // left: 'right'
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                data: []
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [],
          };

          for (const data in obj[dataKey]) {
            var datas = [];
            var date = [];
            for (let i = 0; i < obj[dataKey][data].datas.length; i++) {
              date.push(obj[dataKey][data].datas[i].Acquisitiontime);
              datas.push(obj[dataKey][data].datas[i].data)
              //date.push(obj[dataKey][data][i].Acquisitiontime);
            }
            var markLine = {};
            if (obj[dataKey][data].pro.lowerlimit && obj[dataKey][data].pro.upperlimit) {
              markLine = {
                silent: true,
                data: [{
                  yAxis: obj[dataKey][data].pro.lowerlimit,
                  lineStyle: {
                    color: obj[dataKey][data].pro.lowerlimitcolor
                  }
                }, {
                  yAxis: obj[dataKey][data].pro.upperlimit,
                  lineStyle: {
                    color: obj[dataKey][data].pro.upperlimitcolor
                  }
                }]
              }
            }
            option.xAxis[0].data = date;
            option.legend.data.push(data);
            option.series.push({
              name: data, type: 'line',
              color: "#60C2EE",
              data: datas,
              markLine: markLine,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },

            })
            // console.log("类型是:" + dataKey + "----场地是" + data)
            // console.log(obj[dataKey][data])
          }
          myChart.setOption(option);
        } else if (dataKey == 'gzqd') {
          var htm = '<div class="layui-col-sm6">\n' +
            '<div class="layui-card">\n' +
            '  <div class="layui-card-header">实时光照强度展示</div>\n' +
            '  <div class="layui-card-body">\n' +
            '    <table class="layui-table" lay-skin="line">\n' +
            '      <tbody>\n' +
            '      <tr>\n' +
            '        <td>\n' +
            '          <div id="container' + dataKey + '" style="width:100%; height:300px"></div>\n' +
            '        </td>\n' +
            '      </tr>\n' +
            '      </tbody>\n' +
            '    </table>\n' +
            '  </div>\n' +
            '</div>\n' +
            ' </div>';
          $("#findHomecontainer").append(htm)
          var dom = document.getElementById("container" + dataKey);
          var myChart = echarts.init(dom);
          var option = {
            title: {
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              formatter: '{b} <br/>{c} Lux',
            },

            legend: {
              // orient: 'vertical',
              data: [],
              // left: 'right'
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                data: []
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [],
          };

          for (const data in obj[dataKey]) {
            var datas = [];
            var date = [];
            for (let i = 0; i < obj[dataKey][data].datas.length; i++) {
              date.push(obj[dataKey][data].datas[i].Acquisitiontime);
              datas.push(obj[dataKey][data].datas[i].data)
              //date.push(obj[dataKey][data][i].Acquisitiontime);
            }
            var markLine = {};
            if (obj[dataKey][data].pro.lowerlimit && obj[dataKey][data].pro.upperlimit) {
              markLine = {
                silent: true,
                data: [{
                  yAxis: obj[dataKey][data].pro.lowerlimit,
                  lineStyle: {
                    color: obj[dataKey][data].pro.lowerlimitcolor
                  }
                }, {
                  yAxis: obj[dataKey][data].pro.upperlimit,
                  lineStyle: {
                    color: obj[dataKey][data].pro.upperlimitcolor
                  }
                }]
              }
            }
            option.xAxis[0].data = date;
            option.legend.data.push(data);
            option.series.push({
              name: data, type: 'line',
              color: "#096",
              data: datas,
              markLine: markLine,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },

            })
            // console.log("类型是:" + dataKey + "----场地是" + data)
            // console.log(obj[dataKey][data])
          }
          myChart.setOption(option);
        } else if (dataKey == 'aq') {
          var htm = '<div class="layui-col-sm6">\n' +
            '<div class="layui-card">\n' +
            '  <div class="layui-card-header">实时氨气数据展示</div>\n' +
            '  <div class="layui-card-body">\n' +
            '    <table class="layui-table" lay-skin="line">\n' +
            '      <tbody>\n' +
            '      <tr>\n' +
            '        <td>\n' +
            '          <div id="container' + dataKey + '" style="width:100%; height:300px"></div>\n' +
            '        </td>\n' +
            '      </tr>\n' +
            '      </tbody>\n' +
            '    </table>\n' +
            '  </div>\n' +
            '</div>\n' +
            ' </div>';
          $("#findHomecontainer").append(htm)
          var dom = document.getElementById("container" + dataKey);
          var myChart = echarts.init(dom);
          var option = {
            title: {
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              formatter: '{b} <br/>{c} ppm',
            },

            legend: {
              // orient: 'vertical',
              data: [],
              // left: 'right'
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                data: []
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [],
          };

          for (const data in obj[dataKey]) {
            var datas = [];
            var date = [];
            for (let i = 0; i < obj[dataKey][data].datas.length; i++) {
              date.push(obj[dataKey][data].datas[i].Acquisitiontime);
              datas.push(obj[dataKey][data].datas[i].data)
              //date.push(obj[dataKey][data][i].Acquisitiontime);
            }
            var markLine = {};
            if (obj[dataKey][data].pro.lowerlimit && obj[dataKey][data].pro.upperlimit) {
              markLine = {
                silent: true,
                data: [{
                  yAxis: obj[dataKey][data].pro.lowerlimit,
                  lineStyle: {
                    color: obj[dataKey][data].pro.lowerlimitcolor
                  }
                }, {
                  yAxis: obj[dataKey][data].pro.upperlimit,
                  lineStyle: {
                    color: obj[dataKey][data].pro.upperlimitcolor
                  }
                }]
              }
            }
            option.xAxis[0].data = date;
            option.legend.data.push(data);
            option.series.push({
              name: data,
              type: 'line',
              color: "#7079DF",
              data: datas,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: markLine
            })
            // console.log("类型是:" + dataKey + "----场地是" + data)
            // console.log(obj[dataKey][data])
          }
          myChart.setOption(option);
        }
      }
      /*   var arr = [];
         for (var i = 0; i < obj.length; i++) {
           for (const st in obj[i]) {
             if (st == 'co2') {
               mkline = [{
                 yAxis: 950
               }]
               var data = [];
               var date = [];
               var arrname = [];
               var arrseries = [];
               for (let j = 0; j < obj[i][st].length; j++) {
                 data.push(obj[i][st][j].data);
                 date.push(obj[i][st][j].Acquisitiontime)
               }
               var htm = '<div class="layui-col-sm6">\n' +
                 '<div class="layui-card">\n' +
                 '  <div class="layui-card-header">实时二氧化碳展示</div>\n' +
                 '  <div class="layui-card-body">\n' +
                 '    <table class="layui-table" lay-skin="line">\n' +
                 '      <tbody>\n' +
                 '      <tr>\n' +
                 '        <td>\n' +
                 '          <div id="container' + st + '" style="width:100%; height:300px"></div>\n' +
                 '        </td>\n' +
                 '      </tr>\n' +
                 '      </tbody>\n' +
                 '    </table>\n' +
                 '  </div>\n' +
                 '</div>\n' +
                 ' </div>';
               $("#findHomecontainer").append(htm)
               var dom = document.getElementById("container" + st);
               var myChart = echarts.init(dom);
               myChart.setOption(option = {
                 title: {
                   /!* text: '二氧化碳实时展示',
                    subtext: '二氧化碳',*!/
                   left: 'center'
                 },
                 tooltip: {
                   trigger: 'axis',
                   formatter: '{a} <br/>{c} CO2',
                 },

                 legend: {
                   // orient: 'vertical',
                   data: ['鸡舍一号', '鸡舍二号'],
                   // left: 'right'
                 },
                 calculable: true,
                 xAxis: [
                   {
                     type: 'category',
                     data: date
                   }
                 ],
                 yAxis: [
                   {
                     type: 'value'
                   }
                 ],
                 series: [
                   {
                     name: '鸡舍一号',
                     type: 'line',
                     color: '#E5C33C',
                     data: data,
                     markPoint: {
                       data: [
                         {type: 'max', name: '最大值'},
                         {type: 'min', name: '最小值'}
                       ]
                     },
                     markLine: {
                       silent: true,
                       data: [{
                         yAxis: 950
                       }]
                     },
                   },

                   {
                     name: '鸡舍二号',
                     type: 'line',
                     color: '#E5C33C',
                     data: data,
                     markPoint: {
                       data: [
                         {type: 'max', name: '最大值'},
                         {type: 'min', name: '最小值'}
                       ]
                     },
                     markLine: {
                       silent: true,
                       data: [{
                         yAxis: 950
                       }]
                     },
                   }
                 ],
                 dataZoom: [{
                   start: 0,//默认为0
                   end: 100,//默认为100
                 }, {
                   startValue: '2014-06-01'
                 }, {
                   type: 'inside'
                 }],

               });
             } else if (st == 'wd') {
               var data = [];
               var date = [];
               var arrname = [];
               var arrseries = [];
               for (let j = 0; j < obj[i][st].length; j++) {
                 data.push(obj[i][st][j].data);
                 date.push(obj[i][st][j].Acquisitiontime)
               }
               var htm = '<div class="layui-col-sm6">\n' +
                 '<div class="layui-card">\n' +
                 '  <div class="layui-card-header">实时温度数据展示</div>\n' +
                 '  <div class="layui-card-body">\n' +
                 '    <table class="layui-table" lay-skin="line">\n' +
                 '      <tbody>\n' +
                 '      <tr>\n' +
                 '        <td>\n' +
                 '          <div id="container' + st + '" style="width:100%; height:300px"></div>\n' +
                 '        </td>\n' +
                 '      </tr>\n' +
                 '      </tbody>\n' +
                 '    </table>\n' +
                 '  </div>\n' +
                 '</div>\n' +
                 ' </div>';
               $("#findHomecontainer").append(htm)
               var dom = document.getElementById("container" + st);
               var myChart = echarts.init(dom);
               myChart.setOption(option = {
                 title: {
                   // text: '实时温度统计'
                 },
                 tooltip: {
                   formatter: '{a} <br/>{c}℃',
                   trigger: 'axis'
                 },
                 xAxis: {
                   data: date
                 },
                 yAxis: {
                   splitLine: {
                     show: false
                   }
                 },

                 legend: {
                   // orient: 'vertical',
                   data: ['鸡舍一号','鸡舍二号'],
                   // left: 'right'
                 },

                 dataZoom: [{
                   start: 0,//默认为0
                   end: 100,//默认为100
                 }, {
                   startValue: '2014-06-01'
                 }, {
                   type: 'inside'
                 }],
                 visualMap: {
                   top: 10,
                   right: 10,
                   pieces: [{
                     gt: 17,
                     lte: 27,
                     color: '#5bc49f'
                   }, {
                     gt: 28,
                     lte: 37,
                     color: '#feb64d'
                   }, {
                     gt: 38,
                     color: '#ff7c7c'
                   }],
                   outOfRange: {
                     color: '#9287E7'
                   }
                 },
                 series: [{
                   name: '鸡舍一号', type: 'line',
                   color: '#5bc49f',
                   data: data,
                   markLine: {
                     silent: true,
                     data: [{
                       yAxis: 18
                     }, {
                       yAxis: 24
                     }]
                   },
                   markPoint: {
                     data: [
                       {type: 'max', name: '最大值'},
                       {type: 'min', name: '最小值'}
                     ]
                   }
                 },
                   {
                     name: '鸡舍二号', type: 'line',
                     color: '#5bc49f',
                     data: data,
                     markLine: {
                       silent: true,
                       data: [{
                         yAxis: 18
                       }, {
                         yAxis: 24
                       }]
                     },
                     markPoint: {
                       data: [
                         {type: 'max', name: '最大值'},
                         {type: 'min', name: '最小值'}
                       ]
                     }
                   }],

               });

             } else if (st == 'sd') {
               var data = [];
               var date = [];
               for (let j = 0; j < obj[i][st].length; j++) {
                 data.push(obj[i][st][j].data);
                 date.push(obj[i][st][j].Acquisitiontime)
               }
               var htm = '<div class="layui-col-sm6">\n' +
                 '<div class="layui-card">\n' +
                 '  <div class="layui-card-header">实时湿度数据展示</div>\n' +
                 '  <div class="layui-card-body">\n' +
                 '    <table class="layui-table" lay-skin="line">\n' +
                 '      <tbody>\n' +
                 '      <tr>\n' +
                 '        <td>\n' +
                 '          <div id="container' + st + '" style="width:100%; height:300px"></div>\n' +
                 '        </td>\n' +
                 '      </tr>\n' +
                 '      </tbody>\n' +
                 '    </table>\n' +
                 '  </div>\n' +
                 '</div>\n' +
                 ' </div>';
               $("#findHomecontainer").append(htm)
               var dom = document.getElementById("container" + st);
               var myChart = echarts.init(dom);
               myChart.setOption(option = {
                 title: {
                   // text: '实时湿度统计'
                 },
                 tooltip: {
                   formatter: '{a} <br/>{c}%HR',
                   trigger: 'axis'
                 },
                 xAxis: {
                   data: date
                 },
                 yAxis: {
                   splitLine: {
                     show: false
                   }
                 },

                 toolbox: {
                   left: 'center',
                   feature: {
                     dataZoom: {
                       yAxisIndex: 'none'
                     },
                     restore: {},
                     saveAsImage: {}
                   }
                 },

                 dataZoom: [{
                   start: 0,//默认为0
                   end: 100,//默认为100
                 }, {
                   startValue: '2014-06-01'
                 }, {
                   type: 'inside'
                 }],
                 visualMap: {
                   top: 10,
                   right: 10,
                   pieces: [{
                     gt: 17,
                     lte: 27,
                     color: '#60C2EE'
                   }, {
                     gt: 28,
                     lte: 37,
                     color: '#35C5EA'
                   }, {
                     gt: 38,
                     color: '#2CBDD3'
                   }],
                   outOfRange: {
                     color: '#999'
                   }
                 },
                 series: {
                   name: '湿度', type: 'line',
                   color: '#60C2EE',
                   data: data,
                   markLine: {
                     silent: true,
                     data: [{
                       yAxis: 40,
                       lineStyle: {
                         color: 'green'
                       }
                     }, {
                       yAxis: 60
                     }]
                   },
                   markPoint: {
                     data: [
                       {type: 'max', name: '最大值'},
                       {type: 'min', name: '最小值'}
                     ]
                   },

                 }
               });

             } else if (st == 'gzqd') {
               var data = [];
               var date = [];
               for (let j = 0; j < obj[i][st].length; j++) {
                 data.push(obj[i][st][j].data);
                 date.push(obj[i][st][j].Acquisitiontime)
               }
               var htm = '<div class="layui-col-sm6">\n' +
                 '<div class="layui-card">\n' +
                 '  <div class="layui-card-header">实时光照强度展示</div>\n' +
                 '  <div class="layui-card-body">\n' +
                 '    <table class="layui-table" lay-skin="line">\n' +
                 '      <tbody>\n' +
                 '      <tr>\n' +
                 '        <td>\n' +
                 '          <div id="container' + st + '" style="width:100%; height:300px"></div>\n' +
                 '        </td>\n' +
                 '      </tr>\n' +
                 '      </tbody>\n' +
                 '    </table>\n' +
                 '  </div>\n' +
                 '</div>\n' +
                 ' </div>';
               $("#findHomecontainer").append(htm)
               var dom = document.getElementById("container" + st);
               var myChart = echarts.init(dom);
               myChart.setOption(option = {
                 title: {
                   // text: '实时光照强度统计'
                 },
                 tooltip: {
                   trigger: 'axis'
                 },
                 xAxis: {
                   data: date
                 },
                 yAxis: {
                   min: 0,
                   splitNumber: 10,
                   splitLine: {
                     show: false
                   }
                 },

                 toolbox: {
                   left: 'center',
                   feature: {
                     dataZoom: {
                       yAxisIndex: 'none'
                     },
                     restore: {},
                     saveAsImage: {}
                   }
                 },

                 dataZoom: [{
                   startValue: '2014-06-01'
                 }, {
                   type: 'inside'
                 }],
                 visualMap: {
                   top: 10,
                   right: 10,
                   pieces: [{
                     gt: 0,
                     lte: 15,
                     color: '#096'
                   }, {
                     gt: 15,
                     lte: 30,
                     color: '#ffde33'
                   }, {
                     gt: 30,
                     lte: 40,
                     color: '#ff9933'
                   }, {
                     gt: 40,
                     lte: 60,
                     color: '#cc0033'
                   }, {
                     gt: 60,
                     lte: 70,
                     color: '#660099'
                   }, {
                     gt: 70,
                     color: '#7e0023'
                   }],
                   outOfRange: {
                     color: '#999'
                   }
                 },
                 series: {
                   name: "光照", type: 'line',
                   color: "#096",
                   data: data,
                   markLine: {
                     silent: true,
                     data: [{
                       yAxis: 3
                     }]
                   },
                   markPoint: {
                     data: [
                       {type: 'max', name: '最大值'},
                       {type: 'min', name: '最小值'}
                     ]
                   },

                 }
               });

             } else if (st == 'aq') {
               var data = [];
               var date = [];
               for (let j = 0; j < obj[i][st].length; j++) {
                 data.push(obj[i][st][j].data);
                 date.push(obj[i][st][j].Acquisitiontime)
               }
               var htm = '<div class="layui-col-sm6">\n' +
                 '<div class="layui-card">\n' +
                 '  <div class="layui-card-header">实时氨气数据展示</div>\n' +
                 '  <div class="layui-card-body">\n' +
                 '    <table class="layui-table" lay-skin="line">\n' +
                 '      <tbody>\n' +
                 '      <tr>\n' +
                 '        <td>\n' +
                 '          <div id="container' + st + '" style="width:100%; height:300px"></div>\n' +
                 '        </td>\n' +
                 '      </tr>\n' +
                 '      </tbody>\n' +
                 '    </table>\n' +
                 '  </div>\n' +
                 '</div>\n' +
                 ' </div>';
               $("#findHomecontainer").append(htm)
               var dom = document.getElementById("container" + st);
               var myChart = echarts.init(dom);
               myChart.setOption(option = {
                 title: {
                   // text: '氨气实时展示',
                   // subtext: '氨气',
                   // left: 'center'
                 },
                 tooltip: {
                   trigger: 'axis'
                   ,
                   formatter: '{a} <br/>{c} PPM',
                 },
                 legend: {
                   orient: 'vertical',
                   data: ['A指标'],
                   left: 'right'
                 },
                 calculable: true,
                 xAxis: [
                   {
                     type: 'category',
                     data: date
                   }
                 ],
                 yAxis: [
                   {
                     type: 'value'
                   }
                 ],
                 series: [
                   {
                     name: 'A指标',
                     type: 'line',
                     color: '#7079DF',
                     data: data,
                     markPoint: {
                       data: [
                         {type: 'max', name: '最大值'},
                         {type: 'min', name: '最小值'}
                       ]
                     },
                     markLine: {
                       data: [{
                         yAxis: 6
                       }]
                     }
                   }
                 ],
                 dataZoom: [{
                   start: 0,//默认为0
                   end: 100,//默认为100
                 }, {
                   startValue: '2014-06-01'
                 }, {
                   type: 'inside'
                 }]
               });
             } else if (st == 'fs') {
               var data = [];
               var date = [];
               for (let j = 0; j < obj[i][st].length; j++) {
                 data.push(obj[i][st][j].data);
                 date.push(obj[i][st][j].Acquisitiontime)
               }
               var htm = '<div class="layui-col-sm6">\n' +
                 '<div class="layui-card">\n' +
                 '  <div class="layui-card-header">实时风速展示</div>\n' +
                 '  <div class="layui-card-body">\n' +
                 '    <table class="layui-table" lay-skin="line">\n' +
                 '      <tbody>\n' +
                 '      <tr>\n' +
                 '        <td>\n' +
                 '          <div id="container' + st + '" style="width:100%; height:300px"></div>\n' +
                 '        </td>\n' +
                 '      </tr>\n' +
                 '      </tbody>\n' +
                 '    </table>\n' +
                 '  </div>\n' +
                 '</div>\n' +
                 ' </div>';
               $("#findHomecontainer").append(htm)
               var dom = document.getElementById("container" + st);
               var myChart = echarts.init(dom);
               myChart.setOption(option = {
                 color: '#AFE39B',
                 title: {
                   // text: '风速逐时数据展示',
                   // subtext: '当天',
                   // left: 'center'
                 },
                 tooltip: {
                   trigger: 'axis'
                 },
                 xAxis: {
                   type: 'category',
                   data: date
                 },
                 yAxis: {
                   name: '风速/M/S',
                   type: 'value'
                 },
                 series: [{
                   name: '风速',
                   data: data,
                   type: 'bar',
                   markPoint: {
                     data: [
                       {type: 'max', name: '最大值'},
                       {type: 'min', name: '最小值'}
                     ]
                   },
                   markLine: {
                     data: [
                       {type: 'average', name: '平均值'}
                     ]
                   }
                 }],
                 grid: {
                   left: '3%',
                   right: '4%',
                   bottom: '0%',
                   top: '25%',
                   containLabel: true
                 }
               });
             }
           }

         }*/

    });
    /*-----------------图表查询End------------------*/


  });


</script>
</body>
</html>
